<template>
    <el-dialog title="客户 - 运营商统计" :visible="visible" width="1000px" append-to-body @close="close">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="日期" prop="day">
                <el-date-picker
                    size="small"
                    v-model="queryParams.dayList"
                    type="daterange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="left"
                    :value-format="'yyyy-MM-dd'"
                    :clearable="false"
                    :editable="false"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="运营商" prop="operator">
                <el-select v-model="queryParams.operator" placeholder="请选择运营商" size="small" clearable>
                    <el-option
                    v-for="item in operatorArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                <el-button
                    type="warning"
                    icon="el-icon-download"
                    size="small"
                    @click="handleExport"
                    v-hasPermi="['smsgateway:reportCustomerOperator:export']"
                >导出</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="reportList">
            <el-table-column label="日期" align="center" prop="day" width="180" />
            <el-table-column label="账号ID" align="center" prop="customerId" />
            <el-table-column label="运营商" align="center" prop="operator">
                <template slot-scope="scope">{{getOperatorName(scope.row.operator)}}</template>
            </el-table-column>
            <el-table-column label="成功量" align="center" prop="successCount" />
            <el-table-column label="失败量" align="center" prop="errorCount" />
            <el-table-column label="未知量" align="center" prop="unknownCount" />
            <el-table-column label="公司收入" align="center" prop="customerAmount" />
            <el-table-column label="通道成本" align="center" prop="channelCost" />
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </el-dialog>
</template>

<script>
import {
    listReportCustomerOperator,
    getReportCustomerOperator,
    exportReportCustomerOperator
} from "@/api/sms/reportCustomerOperator";
import { getOperatorList, getOperatorName } from '@/utils/operator';
import daterange from './mixins/daterange'
import pageCustomer from './mixins/pageCustomer'

export default {
    name: "DialogReportCustomerOperator",
    mixins: [pageCustomer, daterange],
    data() {
        return {
            reportParams: {
                pageNum: 1,
                pageSize: 10,
                customerId: undefined,
                operator: undefined,
            },
            // 查询参数
            queryParams: {
                operator: undefined,
                dayList: [],
            },
            operatorArr: getOperatorList(),
        };
    },
    watch: {
        customerId: function(val) {
            if(val){
                this.queryParams.dayList = this.dayList

                this.reportParams.customerId = val;
                this.reportParams.startDay = this.queryParams.dayList[0]
                this.reportParams.endDay = this.queryParams.dayList[1]
                this.getList();
            }
        },
    },
    methods: {
        /** 查询客户-运营商统计列表 */
        getList() {
            this.loading = true;
            listReportCustomerOperator(this.reportParams).then(response => {
                this.reportList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.reportParams.pageNum = 1;
            this.reportParams.operator = this.queryParams.operator
            this.reportParams.startDay = this.queryParams.dayList[0]
            this.reportParams.endDay = this.queryParams.dayList[1]

            this.getList();
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.reportParams;
            this.$confirm("是否确认导出所有客户-运营商统计数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(function() {
                    return exportReportCustomerOperator(queryParams);
                })
                .then(response => {
                    this.download(response.msg);
                })
                .catch(function() {});
        },
        // 获取运营商名称
        getOperatorName(value){
            return getOperatorName(value)
        },
    }
};
</script>